<template>
	<view :data-theme="themeStyle">
		<view scroll-y="true" class="goods-detail" :class="isIphoneX ? 'active' : ''">
			<view class="goods-container">
				<!-- 商品媒体信息 -->
				<view class="goods-media">
					<!-- 商品图片 -->
					<view class="goods-img" :class="{ show: switchMedia == 'img' }">
						<swiper class="swiper" @change="swiperChange" :interval="swiperInterval" :autoplay="swiperAutoplay">
							<swiper-item v-for="(item, index) in goodsSkuDetail.sku_images" :key="index" :item-id="'goods_id_' + index">
								<view class="item" @click="previewMedia(index)">
									<image :src="$util.img(item, { size: 'big' })" @error="swiperImageError(index)" mode="aspectFit" />
								</view>
							</swiper-item>
						</swiper>
						<view class="img-indicator-dots">
							<text>{{ swiperCurrent }}</text>
							<text v-if="goodsSkuDetail.sku_images">/{{ goodsSkuDetail.sku_images.length }}</text>
						</view>
					</view>
					<!-- 商品视频 -->
					<view class="goods-video" :class="{ show: switchMedia == 'video' }">
						<video :src="$util.img(goodsSkuDetail.video_url)" :poster="$util.img(goodsSkuDetail.sku_image, { size: 'big' })"
						 objectFit="cover"></video>
					</view>

					<!-- 切换视频、图片 -->
					<view class="media-mode" v-if="goodsSkuDetail.video_url != ''">
						<text :class="{ 'active ns-bg-color': switchMedia == 'video' }" @click="switchMedia = 'video'">{{ $lang('video') }}</text>
						<text :class="{ 'active ns-bg-color': switchMedia == 'img' }" @click="switchMedia = 'img'">{{ $lang('image') }}</text>
					</view>

					<view class="follow-and-share">
						<view class="follow" @click="openSharePopup()"><text class="iconfont iconiconfontzhizuobiaozhun023130"></text></view>
						<view class="share ns-margin-left" @click="editCollection()">
							<text class="iconfont" :class="whetherCollection == 1 ? 'iconlikefill ns-text-color' : 'icongz'"></text>
						</view>
					</view>
				</view>
				
				<view class="goods-presale" v-if="goodsSkuDetail.timeMachine">
					<view class="price-info">
						<view class="price-info-box">
							<view class="groupbuy-price">
								<text class="price-big">预售</text>
							</view>
						</view>
					</view>

					<view class="countdown">
						<view class="txt">距结束仅剩</view>
						<view class="clockrun">
							<uni-count-down :day="goodsSkuDetail.timeMachine.d" :hour="goodsSkuDetail.timeMachine.h" :minute="goodsSkuDetail.timeMachine.i"
							 :second="goodsSkuDetail.timeMachine.s" color="#fff" splitorColor="#000 !important" backgroundColorClass="ns-bg-color" />
						</view>
					</view>
				</view>
				<view class="group-wrap">
					<view class="goods-module-wrap price">
						<view class="goods-module-wrap-box">
							<text class="price-symbol ns-text-color">{{ $lang('common.currencySymbol') }}</text>
							<text class="price ns-text-color">{{ goodsSkuDetail.price }}</text>
							<text class="deposit">定金：<text class="ns-text-color">{{ $lang('common.currencySymbol') }}{{ goodsSkuDetail.presale_deposit }}</text></text>
							<text class="presale-price ns-text-color ns-border-color">可抵{{ $lang('common.currencySymbol') }}{{ goodsSkuDetail.presale_price }}</text>
						</view>
					</view>
					<view class="goods-module-wrap info">
						<view>
							<text class="sku-name">{{ goodsSkuDetail.sku_name }}</text>
							<text class="introduction ns-text-color ns-font-size-base ns-margin-top" v-if="goodsSkuDetail.introduction">{{ goodsSkuDetail.introduction }}</text>
						</view>
						<view class="adds-wrap">
							<block v-if="Development">
								<text v-if="goodsSkuDetail.is_free_shipping" class="ns-font-size-base">快递：包邮</text>
								<text v-else class="ns-font-size-base">快递：买家承担</text>
							</block>
							<text>总销量 {{ goodsSkuDetail.sale_num }} {{ goodsSkuDetail.unit }}</text>
						</view>
					</view>
				</view>
				
				<!-- 预售流程 -->
				<view class="group-wrap">
					<view class="presale-rule">
						<view class="tit">预售玩法</view>
						<view class="ns-font-size-sm"><text class="ns-text-color-gray">尾款支付时间：</text>{{$util.timeStampTurnTime(goodsSkuDetail.pay_start_time)}} - {{$util.timeStampTurnTime(goodsSkuDetail.pay_end_time)}}</view>
						<view class="ns-font-size-sm"><text class="ns-text-color-gray">预售发货时间：</text>
							<text v-if="goodsSkuDetail.deliver_type == 0">{{$util.timeStampTurnTime(goodsSkuDetail.deliver_time)}}</text>
							<text v-else>尾款支付{{ goodsSkuDetail.deliver_time }}天后发货</text>
						</view>
						<view class="tit">预售流程</view>
						<view class="process">
							<view class="process-item">
								<text class="number">1</text>
								<text>付定金</text>
							</view>
							<view class="space ns-text-color">······</view>
							<view class="process-item">
								<text class="number">2</text>
								<text>付尾款</text>
							</view>
							<view class="space ns-text-color">······</view>
							<view class="process-item">
								<text class="number">3</text>
								<text>发货</text>
							</view>
						</view>
					</view>
				</view>
				
				<view class="newdetail ns-margin-bottom">
					<!-- 服务 -->
					<view class="newdetail-item service" @click="openMerchantsServicePopup()" v-if="goodsSkuDetail.goods_service.length">
						<view class="service-info">
							<text class="tit">服务</text>
							<text class="service-item" v-for="(item, index) in goodsSkuDetail.goods_service" :key="index">
								<text class="iconfont icondui ns-text-color"></text>
								<text>{{item.service_name}}</text>
							</text>
						</view>
						<text class="iconfont iconright"></text>
					</view>
				</view>

				<!-- 营销活动 -->
				<view class="group-wrap">
					<!-- 商家服务 -->
					<view @touchmove.prevent.stop>
						<uni-popup ref="merchantsServicePopup" type="bottom">
							<view class="goods-merchants-service-popup-layer">
								<text class="tax-title ns-text-color-black" @click="closeMerchantsServicePopup()">{{ $lang('service') }} <text
									 class="iconfont iconclose"></text></text>
								<scroll-view scroll-y>
									<view class="item" v-for="(item, index) in goodsSkuDetail.goods_service" :key="index">
										<view class="iconfont icondui ns-text-color"></view>
										<view class="info-wrap">
											<text class="title">{{ item.service_name }}</text>
											<text class="describe">{{ item.desc }}</text>
										</view>
									</view>
								</scroll-view>
								<view class="button-box"><button type="primary" @click="closeMerchantsServicePopup()">确定</button></view>
							</view>
						</uni-popup>
					</view>
				</view>

				<!-- 商品评价 -->
				<view class="group-wrap">
					<view class="goods-evaluate">
						<view class="tit" :class="goodsSkuDetail.evaluate == 0 ? 'notit' : ''">
							<view>
								<text class="ns-font-size-base ns-text-color-black">宝贝评价（{{ goodsSkuDetail.evaluate }}）</text>
							</view>
						</view>
						<view class="evaluate-item" v-if="goodsEvaluate.content">
							<view class="evaluator">
								<view class="evaluator-info">
									<view class="evaluator-face">
										<image v-if="goodsEvaluate.member_headimg" :src="$util.img(goodsEvaluate.member_headimg)" @error="goodsEvaluate.member_headimg = $util.getDefaultImage().default_headimg"
										 mode="aspectFill" />
										<image v-else :src="$util.getDefaultImage().default_headimg" @error="goodsEvaluate.member_headimg = $util.getDefaultImage().default_headimg"
										 mode="aspectFill" />
									</view>
									<text class="evaluator-name">{{ goodsEvaluate.member_name }}</text>
								</view>
								<text class="creatTime ns-text-color-gray">{{ $util.timeStampTurnTime(goodsEvaluate.create_time) }}</text>
							</view>
							<view class="cont ns-margin-top ns-text-color-gray">{{ goodsEvaluate.content }}</view>
							<view class="evaluate-img" v-if="goodsEvaluate.images">
								<view class="img-box" v-for="(item, index) in goodsEvaluate.images" :key="index" @click="previewEvaluate(index, 'images')">
									<image :src="$util.img(item)" mode="aspectFit" />
								</view>
							</view>
							<block v-if="goodsEvaluate.again_content != ''">
								<view class="againEvaluate ns-text-color">
									追加评价
								</view>
								<view class="cont ns-margin-top ns-text-color-gray">{{ goodsEvaluate.again_content }}</view>
								<view class="evaluate-img" v-if="goodsEvaluate.again_images">
									<view class="img-box" v-for="(item, index) in goodsEvaluate.again_images" :key="index" @click="previewEvaluate(index, 'images')">
										<image :src="$util.img(item)" mode="aspectFit" />
									</view>
								</view>
								
							</block>
							<text @click="toEvaluateDetail(goodsSkuDetail.goods_id)" class="evaluateMore">
								<text>查看全部评论</text>
							</text>
						</view>
						<view class="evaluate-item-empty" v-else>该商品暂无评价哦</view>
					</view>
				</view>

				<!-- 详情 -->
				<view class="goods-detail-tab">
					<view class="detail-tab">
						<view class="tab-item" :class="detailTab == 0 ? 'active ns-text-color ns-bg-before' : ''" @click="detailTab = 0">商品详情</view>
						<view class="tab-item" :class="detailTab == 1 ? 'active ns-text-color ns-bg-before' : ''" @click="detailTab = 1">售后保障</view>
					</view>
					<view class="detail-content" :class="detailTab == 1 ? 'active' : ''">
						<view class="detail-content-item" v-show="detailTab == 0">
							<view class="goods-details" v-if="goodsSkuDetail.goods_content">
								<rich-text :nodes="goodsSkuDetail.goods_content"></rich-text>
							</view>
							<view class="goods-details active" v-else>该商家暂无上传相关详情哦！</view>
						</view>
						<view class="detail-content-item" v-show="detailTab == 1">
							<view class="goods-details" v-if="service">
								<rich-text :nodes="service"></rich-text>
							</view>
							<view class="goods-details active" v-else>该商品暂无相关售后哦！</view>
						</view>
					</view>
				</view>

				<nsGoodsRecommend ref="goodrecommend"></nsGoodsRecommend>

				<!-- SKU选择 -->
				<ns-goods-sku ref="goodsSku" @refresh="refreshGoodsSkuDetail" :goods-detail="goodsSkuDetail" :max-buy="goodsSkuDetail.presale_num"></ns-goods-sku>

				<!-- 海报 -->
				<view @touchmove.prevent.stop>
					<uni-popup ref="posterPopup" type="bottom" class="poster-layer">
						<template v-if="poster != '-1'">
							<view :style="{ height: posterHeight > 0 ? posterHeight + 80 + 'px' : '' }">
								<view class="image-wrap">
									<image :src="$util.img(poster)" :style="{ height: posterHeight > 0 ? posterHeight + 'px' : '' }" />
								</view>
								<!-- #ifdef MP -->
								<view class="save" @click="saveGoodsPoster()">保存图片</view>
								<!-- #endif -->
								<!-- #ifdef H5 -->
								<view class="save">长按保存图片</view>
								<!-- #endif -->
							</view>
							<view class="close iconfont iconclose" @click="closePosterPopup()"></view>
						</template>
						<view v-else class="msg">{{ posterMsg }}</view>
					</uni-popup>
				</view>

				<!-- 分享弹窗 -->
				<view @touchmove.prevent.stop>
					<uni-popup ref="sharePopup" type="bottom" class="share-popup">
						<view>
							<view class="share-title">分享</view>
							<view class="share-content">
								<!-- #ifdef MP -->
								<view class="share-box">
									<button class="share-btn" :plain="true" open-type="share">
										<view class="iconfont iconiconfenxianggeihaoyou"></view>
										<text>分享给好友</text>
									</button>
								</view>
								<!-- #endif -->
								<!-- #ifdef MP-WEIXIN -->
								<view class="share-box" v-if="goodsCircle">
									<button class="share-btn" :plain="true" @click="openBusinessView">
										<view class="iconfont iconhaowuquan"></view>
										<text>分享到好物圈</text>
									</button>
								</view>
								<!-- #endif -->
								<view class="share-box" @click="openPosterPopup">
									<button class="share-btn" :plain="true">
										<view class="iconfont iconpengyouquan"></view>
										<text>生成分享海报</text>
									</button>
								</view>
							</view>
							<view class="share-footer" @click="closeSharePopup"><text>取消分享</text></view>
						</view>
					</uni-popup>
				</view>

				<loading-cover ref="loadingCover"></loading-cover>

				<ns-login ref="login"></ns-login>

				<!-- 商品底部导航 -->
				<ns-goods-action :safeArea="isIphoneX">
					<template v-if="goodsSkuDetail.goods_state == 1">
						<ns-goods-action-icon text="首页" icon="iconshouye" @click="goHome" />
						<!-- #ifdef MP -->
						<ns-goods-action-icon text="客服" icon="iconkefu"  open-type="contact" :send-data="contactData" />
						<!-- #endif -->
						<!-- <ns-goods-action-icon text="客服" icon="iconkefu" v-if="addonIsExit.servicer" @click="goConnect" />
						<ns-goods-action-icon text="客服" icon="iconkefu" v-else open-type="contact" :send-data="contactData" /> -->
						<ns-goods-action-icon text="购物车" icon="icongouwuche" :corner-mark="cartCount > 0 ? cartCount + '' : ''" @click="goCart" />
						<ns-goods-action-button class="goods-action-button" :class="goodsSkuDetail.is_single_buy == 1 ? 'active2' : 'active4'"
						 :text-price="'¥ ' + goodsSkuDetail.presale_deposit" text="支付定金" @click="presale" />
					</template>
					<template v-else>
						<ns-goods-action-button class="goods-action-button active3" disabled-text="该商品已下架" :disabled="true" />
					</template>
				</ns-goods-action>
			</view>
		</view>
		<to-top v-if="showTop" @toTop="scrollToTopNative()"></to-top>
		<ns-show-toast></ns-show-toast>
	</view>
</template>

<script>
	import nsShowToast from '@/components/ns-show-toast/ns-show-toast.vue'
	import nsGoodsAction from '@/components/ns-goods-action/ns-goods-action.vue';
	import nsGoodsActionIcon from '@/components/ns-goods-action-icon/ns-goods-action-icon.vue';
	import nsGoodsActionButton from '@/components/ns-goods-action-button/ns-goods-action-button.vue';
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import nsGoodsSku from '@/components/ns-goods-sku/ns-goods-sku.vue';
	import nsGoodsRecommend from '@/components/ns-goods-recommend/ns-goods-recommend.vue';
	import uniCountDown from '@/components/uni-count-down/uni-count-down.vue';
	import detail from '../public/js/detail.js';
	import scroll from '@/common/js/scroll-view.js';
	import nsGoodsPromotion from '@/components/ns-goods-promotion/ns-goods-promotion.vue';
	import globalConfig from '@/common/js/golbalConfig.js';
	import toTop from '@/components/toTop/toTop.vue';

	export default {
		components: {
			nsGoodsAction,
			nsGoodsActionIcon,
			nsGoodsActionButton,
			uniPopup,
			nsGoodsSku,
			nsGoodsRecommend,
			uniCountDown,
			nsGoodsPromotion,
			toTop,
			nsShowToast
		},
		data() {
			return {};
		},
		onShow() {},
		mixins: [detail, scroll, globalConfig],
		/**
		 * 自定义分享内容
		 * @param {Object} res
		 */
		onShareAppMessage(res) {
			var path = '/promotionpages/presale/detail/detail?id=' + this.id;
			if (this.memberId) path += '&source_member=' + this.memberId;
			return {
				title: this.goodsSkuDetail.sku_name,
				imageUrl: this.$util.img(this.goodsSkuDetail.sku_image, {
					size: 'big'
				}),
				path: path,
				success: res => {},
				fail: res => {}
			};
		},
		methods: {
			toEvaluateDetail(id) {
				this.$util.redirectTo('/otherpages/goods/evaluate/evaluate', {
					goods_id: id
				})
			}
		}
	};
</script>

<style lang="scss">
	@import '../public/css/detail.scss';
</style>
<style scoped>
	/deep/ .uni-video-cover {
		background: none;
	}

	/deep/ .uni-video-cover-duration {
		display: none;
	}

	/deep/ .uni-video-cover-play-button {
		border-radius: 50%;
		border: 4rpx solid #fff;
		width: 120rpx;
		height: 120rpx;
		background-size: 30%;
	}

	.poster-layer>>>.uni-popup__wrapper-box {
		max-height: initial !important;
	}

	/deep/ .sku-layer .uni-popup__wrapper-box {
		overflow-y: initial !important;
	}

	.goods-presale .countdown .clockrun>>>.uni-countdown__number {
		min-width: 32rpx;
		height: 32rpx;
		text-align: center;
		line-height: 32rpx;
		background: #000;
		/* // #690b08 */
		border-radius: 4px;
		display: inline-block;
		padding: 4rpx;
		margin: 0;
		border: none;
	}

	.goods-presale .countdown .clockrun>>>.uni-countdown__splitor {
		width: 10rpx;
		height: 32rpx;
		line-height: 36rpx;
		text-align: center;
		display: inline-block;
		color: #000;
	}

	.goods-presale .countdown .clockrun>>>.uni-countdown__splitor.day {
		width: initial;
	}

	.spelling-block>>>.uni-countdown__splitor {
		padding: 0;
	}

	.sku-layer>>>.uni-popup__wrapper-box {
		overflow-y: initial !important;
	}

	.poster-layer>>>.uni-popup__wrapper-box {
		max-height: initial !important;
	}

	.spelling-block>>>.uni-countdown__number {
		padding: 0;
		margin: 0;
	}

	/deep/ .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
		max-height: unset !important;
	}

	/deep/ .goods-action-button.active1 {
		padding-left: 10px;
	}

	/deep/ .goods-action-button.active2 {
		padding-right: 10px;
	}

	/deep/ .goods-action-button.active3 {
		padding: 0 10px;
	}

	/deep/ .goods-action-button.active4 {
		padding: 0 10px;
	}

	/deep/ .goods-action-button .action-buttom-wrap {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	/deep/ .goods-action-button.active1 .action-buttom-wrap {
		height: 42px;
		line-height: 42px;
		border-top-left-radius: 42rpx;
		border-bottom-left-radius: 42rpx;
	}

	/deep/ .goods-action-button.active2 .action-buttom-wrap {
		height: 42px;
		line-height: 42px;
		border-top-right-radius: 42rpx;
		border-bottom-right-radius: 42rpx;
	}

	/deep/ .goods-action-button.active3 .action-buttom-wrap {
		height: 42px;
		line-height: 42px;
		border-radius: 42px;
		margin: 10px 0;
	}

	/deep/ .goods-action-button.active4 .action-buttom-wrap {
		height: 42px;
		line-height: 42px;
		border-radius: 42px;
	}

	/deep/ .goods-action-button .action-buttom-wrap text {
		line-height: 1.4;
	}
</style>
